<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form enctype="multipart/form-data" action="{{ url('upload_api') }}" method="post">
    <input type="file" name="file" id="file">
    <input type="submit" value="提交">
</form>
<div id="box"></div>
<script src="/public/javascripts/spark-md5.js"></script>
<script type="text/javascript">

    document.getElementById("file").addEventListener("change", function() {

        var fileReader  = new FileReader();
        var box         = document.getElementById('box');
        var blobSlice   = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice;
        var file = document.getElementById("file").files[0];
        var chunkSize   = 2097152/5;

        console.log(file);

        // read in chunks of 4M
        var chunks = Math.ceil(file.size / chunkSize);
        var currentChunk    = 0;
        var spark           = new SparkMD5();

        fileReader.onload = function(e) {
            console.log("read chunk nr", currentChunk + 1, "of", chunks);
            spark.appendBinary(e.target.result);
            // append binary string
            currentChunk++;

            console.log(e.target.result);

            if (currentChunk < chunks) {
                loadNext();
            } else {
                console.log("finished loading");
                box.innerText = 'MD5 hash:' + spark.end();
                console.info("computed hash", spark.end());
                // compute hash
            }
        };

        function loadNext() {
            var start = currentChunk * chunkSize, end = start + chunkSize >= file.size ? file.size : start + chunkSize;

            fileReader.readAsBinaryString(blobSlice.call(file, start, end));
        }

        loadNext();
    });
</script>

</body>
</html>